<template>
  <div class="contents">
    <div class="contetn_left">
      <ItemWrap class="contetn_left-top" title="电量指标">
        <DLZB :sjlist="sjlist" :key="datekey + 'DLZB'"/>
      </ItemWrap>
      <ItemWrap class="contetn_left-center" title="日充放电量">
        <dayCRDL :key="datekey + 'dayCRDL'"/>
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom" title="实时充放功率">
        <daySY :key="datekey + 'daySY'"/>
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <centerTop class="contetn_center_top" :key="datekey + 'centerTop'"/>
      <CenterMap class="contetn_center_bottom" :key="datekey + 'CenterMap'"/>
    </div>
    <div class="contetn_right">
      <ItemWrap class="contetn_lr-item1" title="收益指标">
        <syzb :sjlist="sjlist" :key="datekey + 'syzb'"/>
      </ItemWrap>
      <ItemWrap class="contetn_lr-item" title="收益排名">
        <sypm :key="datekey + 'sypm'"/>
      </ItemWrap>
      <!-- <ItemWrap class="contetn_lr-item" title="能量流图">
        <img src="./../../assets/img/1111.gif" alt="" style="width: 100%;height: 100%;">
      </ItemWrap> -->
      <ItemWrap class="contetn_lr-item" title="社会效益 ">
        <SHXY :sjlist="sjlist" :key="datekey + 'SHXY'"/>
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import SHXY from './SHXY.vue'
import DLZB from './DLZB.vue'
import CenterMap from './center-map.vue'
import dayCRDL from './dayCRDL.vue'
import centerTop from './centerTop.vue'
import daySY from './daySY.vue'
import sypm from './sypm.vue'
import syzb from './syzb.vue'

import {findDataByDevIdAndName} from '@/api/modules/home.js'

export default {
  components: {
    SHXY,
    CenterMap,
    centerTop,
    daySY,
    sypm,
    syzb,
    dayCRDL,
    DLZB,
  },
  data() {
    return {
      timer: null,
      sjlist: null,
      datekey: 0,
    }
  },
  created() {
    this.getSYZB()
  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer)
    } else {
      this.timer = setInterval(() => {
        this.datekey = new Date()
        this.getSYZB()
      }, 60000)
    }
  },
  methods: {
    getSYZB() {
      this.sjlist = []
      findDataByDevIdAndName({
        devId: this.$store.state.oldUserInfo.companyId,
        sampleName: "quantity_charged,quantity_discharged",
      }).then((res) => {
        if (res.code == 200) {
          this.sjlist = res.data
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
// 内容
.contents {
  .contetn_left {
    margin-left: 20px;
  }

  .contetn_right {
    margin-right: 20px;
  }

  .contetn_left,
  .contetn_right {
    width: 458px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 920px;
  }

  //左右两侧 三个块
  .contetn_lr-item1 {
    height: 240px;
  }

  .contetn_lr-item {
    height: 350px;
  }

  .contetn_left-top {
    height: 220px;
  }

  .contetn_left-center,
  .contetn_left-bottom {
    height: 360px;
  }

  .contetn_center_bottom {
    margin-top: 62px;
    height: 760px;
  }

  .contetn_center_top {
    margin-top: 46px;
    width: 100%;
    height: 72px;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    position: relative;
    gap: 15px 0;
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
